<template>
	<view class="page hotel-comments" style="padding-bottom: 0;">
		<!-- 综合评分 -->
		<view class="part1 flex-row-center">
			<view class="text">
				<view class="font20">{{dataInfo.score}}<text class="font14">分</text></view>
				<view class="font12 font-969696">综合评分</view>
			</view>
			<uni-rate :size="15" :margin="4" :readonly="true" allow-half active-color="#ff6666" :value="dataInfo.score" />
		</view>
		<view class="hr7"></view>
		<!-- 大家都在说 -->
		<view class="part2">
			<view class="title tc font14">大家都在说</view>
			<view class="flex-row-center">
				<uni-data-checkbox mode="tag" selectedColor="#ff6666" :multiple="true" :value="tags" :localdata="tagsArr" @change="tagChange"></uni-data-checkbox>
			</view>
		</view>
		<view class="hr7"></view>
		<!-- 列表 -->
		<LoadMore ref="LoadMore" id="LoadMore" :token="false" :diffHeight="370" :initData="initData" @dataRefresh='dataRefresh' @infoRefresh='infoRefresh'>
			<view class="part3">
				<block v-for="(item, index) in dataList" :key="index">
					<view class="item">
						<view class="flex-row-start">
							<view class="photo bg-cover" :style="{backgroundImage: 'url(' + item.user_img + ')'}"></view>
							<view class="info">
								<view class="name font15">{{item.user_name}}</view>
								<view class="flex-row-start">
									<uni-rate :size="15" :margin="4" :readonly="true" allow-half active-color="#ff6428" :value="item.item_avg" />
									<view class="font14 font-assist">{{item.item_avg}}分</view>
								</view>
							</view>
						</view>
						<view class="date font12 font-999999">{{item.arr}} 入住，{{item.createtime}} 发表</view>
						<view class="desc font13">{{item.content}}</view>
						<view v-if="item.img" class="flex-row-start">
							<block v-for="(img, j) in item.img" :key="j">
								<view class="bg-cover img" :style="{backgroundImage: 'url(' + (imgPath + img) + ')'}"></view>
							</block>
						</view>
					</view>
				</block>
			</view>
		</LoadMore>
	</view>
</template>

<script>
	import LoadMore from "@/components/j-loadMore/index.vue";
	export default {
		components: { LoadMore },
		data() {
			return {
				imgPath: this.$Config.http_static, // 图片头
				tagsArr: [],
				tags: [], // 选中的标签
				dataInfo: {},
				dataList: [],
				// 传参数据
				initData: {
					url: 'hotelComment',
					param: {
						id: ''
					}
				},
			}
		},
		onLoad (options) {
			this.initData.param.id = options.hotelId
		},
		methods: {
			// LoadMore返回列表数据
			dataRefresh (e) {
				this.dataList = e
			},
			// LoadMore返回信息数据
			infoRefresh (e) {
				this.dataInfo = e
				
				let arr1 = []
				let arr2 = []
				e.comment_tag.forEach((item, index)=>{
					arr1.push({
						value: index,
						text: item.name + "(" + item.num + ")",
						disable: true
					})
					if (item.num > 50) {
						arr2.push(index)
					}
				})
				this.tagsArr = arr1
				this.tags = arr2
			}
		}
	}
</script>

<style lang="less">
	/* 酒店评价列表 */
	.hotel-comments{
		.part1{
			padding: 30rpx;
			.text{padding-right: 20rpx;}
		}
		.part2{
			padding: 20rpx 0 30rpx;
			.title{
				position: relative;line-height: 70rpx;margin-bottom: 20rpx;
				&::after{display: block;content: " ";width: 40rpx;height: 2rpx;background-color: #f44;position: absolute;bottom: 0; left: 50%;transform: translateX(-50%);}
			}
		}
		.part3{
			.item{
				border-bottom: 2rpx solid #f5f5f5;padding: 30rpx;
				.photo{width: 100rpx;height: 100rpx;border-radius: 50%;margin-right: 30rpx;}
				.name{padding-bottom: 10rpx;}
				.date{padding-top: 20rpx;}
				.desc{padding: 20rpx 0;}
				.img{width: 130rpx;height: 130rpx;border-radius: 6rpx;margin-right: 20rpx;}
			}
		}
	}
</style>
